<template>
  <a-spin :spinning="confirmLoading">
    <a-card :bordered="false">

      <!-- 查询区域 -->
      <div class="ant-alert ant-alert-info">
        <div class="table-page-search-wrapper">
          <a-form layout="inline" id="selectForm">
            <a-row>
              <a-col :span="6">
                <a-form-item label="产线">
                  <a-input v-model="model.line" size="large" :disabled="true"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="工站">
                  <a-input v-model="model.stn" size="large" :disabled="true"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="table-page-search-wrapper" style="margin-top: 10px">
          <a-form layout="inline" onsubmit="return false">
            <a-row :gutter="24">
              <a-col :xl="12" :lg="7" :md="8" :sm="24">
                <a-form-item label="产品序列号">
<!--                  <a-input placeholder="请输产品序列号" :allowClear="true" v-model="model2.barcode" size="large"-->
<!--                           ref="code" @keyup.enter.native="judgment(model2.barcode)" oninput="codeInput()" onChange = "cChange()"></a-input>-->
                  <input type="text" ref="code"  placeholder="请输产品序列号" v-model.lazy="model2.barcode" @keyup.enter="judgment(model2.barcode)" @change="cChange" @input="codeInput" style="width: 100%"/>
                </a-form-item>
              </a-col>
              <a-col :xl="5" :lg="7" :md="8" :sm="24">
                <a-radio-group v-model="model2.codeType">
                  <a-radio :value="1">包装</a-radio>
                  <a-radio :value="2">解绑</a-radio>
                  <a-radio :value="3">标签重打</a-radio>
                </a-radio-group>
              </a-col>
              <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button size="large" type="primary" @click="searchQuery(weightType)">称重</a-button>
              <a-radio-group v-model="weightType" style="margin-left: 20px">
                <a-radio value="unloadsbox">盒</a-radio>
                <a-radio value="unloadbbox">箱</a-radio>
              </a-radio-group>
            </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div style="margin-top: 10px;">
          <a-row :gutter="16">
            <a-col class="height-50" :span="6">
              <div>
                <h1 STYLE="font-size: xx-large">工单信息</h1>
                <h2>工 单 号:&nbsp;
                  <a-input v-model:value="wo.id" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">产品料号:
                  <a-input v-model:value="wo.pn" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">检验员工:
                  <a-input v-model:value="userName" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">工单数量:
                  <a-input v-model:value="wo.qty" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">当前数量:
                  <a-input v-model:value="wo.in" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">班 次 名 :&nbsp;
                  <a-input v-model:value="stn.shift" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">合格品数:
                  <a-input v-model:value="stn.ok" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
              </div>
            </a-col>
            <a-col class="height-50" :span="6">
              <div>
                <h1 STYLE="font-size: xx-large">包装信息</h1>
                <h2>箱&nbsp;&nbsp;&nbsp;&nbsp;码:

                  <a-input v-model:value="pack.bCode" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">盒&nbsp;&nbsp;&nbsp;&nbsp;码:
                  <a-input v-model:value="pack.sCode" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">箱重量:
                  <a-input v-model:value="pack.bWeight" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">盒重量:
                  <a-input v-model:value="pack.sWeight" style="width: auto;font-size: x-large" :disabled="true" />
                </h2>
                <h2 style="margin-top: 20px">
                </h2>
                <h2 style="margin-top: 20px">
                </h2>
                <h2 style="margin-top: 20px">
                </h2>
              </div>
            </a-col>
            <a-col :span="4">
              <a-button size="large" type="text" style="background-color: #00DB00;color: white;width: 200px"
                        @click="mantissaSBox">尾盒包装
              </a-button>
              <br><br>
              <a-button size="large" type="text" style="background-color: #008edb;color: white;width: 200px"
                        @click="mantissaBBox">尾箱包装
              </a-button>
            </a-col>
            <a-col v-if="this.isResult==='OK'" :span="4" :offset="4"
                   style="background-color: #00DB00;height: 100px;margin-top: 50px">
              <p class="height-100" style="text-align: center;font-size:xx-large;line-height: 100px">OK</p>
            </a-col>
            <a-col v-else :span="4" :offset="4" style="background-color: red;height: 100px;margin-top: 50px">
              <p class="height-100" style="text-align: center;font-size:xx-large;line-height: 100px">NOK</p>
            </a-col>
          </a-row>
        </div>

        <div style="width: 100%;height: 400px">
          <a-table
            size="small"
            style="width: 100%;height: 400px"
            :columns="fixedColumns"
            :rowClassName="tableRowClass"
            :data-source="logs"
            :showHeader="false"
            :pagination="false"
            :scroll="{ x: 500, y: 400 }"
            bordered
          >
          </a-table>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction } from '@api/manage'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'

export default {
  name: 'MesProdPackage',
  mixins: [mixinDevice],
  components: {},

  data() {
    return {
      sing: [],
      lastType: '',
      keyDownTime: '',
      keyUpTime: '',
      confirmLoading: false,
      dWidth: '100%',
      fixedColumns: [
        {
          width: '10%',
          align: 'left',
          dataIndex: 'time'
        },
        {
          width: '90%',
          align: 'left',
          dataIndex: 'msg'
        }
      ],
      logs: [],
      woOptions: [],
      stnOptions: [],
      userName: '',
      wo: {
        id: '',
        pn: '',
        name: '',
        qty: '',
        in: '',
        out: '',
        scrap: '',
        onhold: ''
      },
      pack: {
        sCode: '',
        bCode: '',
        sWeight: '',
        bWeight: ''
      },
      stn: {
        name: '',
        op: '',
        wo: '',
        opr: '',
        ok: '',
        nok: '',
        wip: '',
        shift: ''
      },
      product: {
        barCode: '',
        result: '',
        resistance: '',
        temperature: ''
      },
      model: {
        line: '',
        dataid: '',
        op: '',
        stn: ''
      },
      model2: {
        codeType: 1
      },
      weightType: 'unloadsbox',
      url: {
        list: '/qis/mesUnitStatus/list'
      },
      runCmd: '/monitor/api/runCmd',
      lineStatus: {
        serviceid: '',
        cmd: '',
        entityid: '',
        clientid: '',
        wo: '1',
        stn: '1'
      },
      load: {
        serviceid: '',
        cmd: '',
        entityid: '',
        clientid: '',
        wo: '1',
        stn: '1'
      },
      isResult: 'OK',
      kanban: null,
      value: this.$route.query.value
    }
  },
  created() {
    window.addEventListener('keypress', this.handkeyCode, true)
    let list = this.$route.query.value.split('-')
    this.model.line = list[0]
    this.model.op = list[1]
    this.model.stn = list[2]
    this.lineChange()
    //this.currentTime();
  },
  watch: {
    //监听路由地址的改变
    '$route.query.value': {
      handler: function(val) {
        let list = val.split('-')
        this.model.line = list[0]
        this.model.op = list[1]
        this.model.stn = list[2]
      },
      deep: true // 深度检测
    }
  },
  computed: {},
  methods: {
    mantissaSBox() {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: 'sprint',
        entityid: '',
        clientid: this.model.line + ';' + this.model.op + ';' + this.model.stn,
        wo: '1',
        stn: this.model.stn
      }
      that.confirmLoading = true
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          if (res.result.errorCode === 'OK') {
            that.$message.success('条码:' + this.model2.barcode + '解绑成功！')
          }
        } else {
        }
      }).finally(() => {
        this.lineChange()
        that.confirmLoading = false
      })
    },
    mantissaBBox() {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: 'bprint',
        entityid: '',
        clientid: this.model.line + ';' + this.model.op + ';' + this.model.stn,
        wo: '1',
        stn: this.model.stn
      }
      that.confirmLoading = true
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          if (res.result.errorCode === 'OK') {
            that.$message.success('包装成功！')
          }
        } else {
        }
      }).finally(() => {
        this.lineChange()
        that.confirmLoading = false
      })
    },
    currentTime() {
      // //定时任务，10s刷新
      // let kanban = setInterval(() => {
      //   this.lineChange();
      // }, 2000)
      // //监听离开页面，定时任务销毁
      // window.addEventListener('popstate', function (e) {
      //   clearInterval(kanban)
      // }, false)
    },
    cChange(){
      let current_date = new Date();
      console.log('监听输入框change'+current_date.toLocaleTimeString())
    },
    codeInput (){
      let current_date = new Date();
      console.log('监听输入框改变'+current_date.toLocaleTimeString())
    },
    judgment(val) {
      console.log('监听回车开始'+new Date().toLocaleTimeString())
      if(this.confirmLoading){
        this.$message.warn('请等待上次操作结束！')
        this.model2.barcode = ''
        return;
      }
      if (this.model2.codeType === 1) {
        if (val.substr(0, 2) === 'P|' || val.substr(0, 2) === 'p|') {
          this.packScan('loadsbox')
        } else if (val.substr(0, 2) === 'S|') {
          this.packScan('loadbbox')
        } else {
          this.codeChange(val)
        }
      } else if (this.model2.codeType === 2) {
        this.unpack(val)
      } else {
        this.printAgain(val)
      }
      console.log('监听回请求结束'+new Date().toLocaleTimeString())
      this.model2.barcode = ''
    },
    /**
     * 解绑
     * @param val
     * @constructor
     */
    unpack(val) {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: 'unpacking',
        entityid: this.model2.barcode,
        clientid: this.model.line + ';' + this.model.op + ';' + this.model.stn,
        wo: '1',
        stn: this.model.stn
      }
      that.confirmLoading = true
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          if (res.result.errorCode === 'OK') {
            that.$message.success('条码:' + this.model2.barcode + '解绑成功！')
          }
        } else {
        }
      }).finally(() => {
        that.confirmLoading = false
        this.lineChange()
        that.model2.barcode = ''
      })
    },
    /**
     * 标签重打
     * @param val
     */
    printAgain(val) {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: 'print',
        entityid: this.model2.barcode,
        clientid: this.model.line + ';' + this.model.op + ';' + this.model.stn,
        wo: '1',
        stn: this.model.stn
      }
      that.confirmLoading = true
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          if (res.result.errorCode === 'OK') {
            that.$message.success('条码:' + this.model2.barcode + '重打成功！')
          }
        } else {
        }
      }).finally(() => {
        this.lineChange()
        that.confirmLoading = false
        that.model2.barcode = ''
      })
    },
    /**
     * 扫盒码/箱码
     * @param type
     */
    packScan(type) {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: type,
        entityid: this.model2.barcode.toUpperCase(),
        clientid: this.model.line + ';' + this.model.op + ';' + this.model.stn,
        wo: '1',
        stn: this.model.stn
      }
      that.confirmLoading = true
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          if (res.result.errorCode === 'OK') {
            this.isResult = res.result.errorCode
            that.$message.success('打包成功！目前数量：' + res.result.returnCode)
          }
        } else {
          this.isResult = res.result.errorCode
        }
      }).finally(() => {
        this.lineChange()
        that.confirmLoading = false
      })
    },
    /**
     * 扫成品码
     * @param val
     */
    codeChange(val) {
      const that = this
      this.load = {
        serviceid: 'mes',
        cmd: 'load',
        entityid: this.model2.barcode,
        clientid: this.model.line + ';' + this.model.op + ';' + this.model.stn,
        wo: '1',
        stn: this.model.stn
      }
      that.confirmLoading = true
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          if (res.result.errorCode === 'OK') {
            that.$message.success('包装成功！目前数量：' + res.result.returnCode)
            this.isResult = 'OK'
          } else {
            this.isResult = res.result.errorCode
          }
        } else {
          this.isResult = false
          that.$message.warning('包装失败!')
        }
      }).finally(() => {
        this.lineChange()
        //this.$refs.code.focus()
        that.confirmLoading = false
      })

    },
    getQueryParam(paramName) {
      const urlParams = new URLSearchParams(window.location.search)
      return urlParams.get(paramName)
    },
    handkeyCode(e) {
      // if (e.keyCode === 32) {
      //   this.searchQuery(this.weightType);
      // }
    },
    searchReset() {
      this.model = {
        line: '',
        dataid: '',
        stn: ''
      }
    },
    tableRowClass(record, index) {
      return 'log-' + record.level
    },
    /**
     * 称重
     * @param type
     */
    searchQuery(type) {
      this.load = {
        serviceid: 'mes',
        cmd: type,
        entityid: '',
        clientid: this.model.line + ';' + this.model.op + ';' + this.model.stn
      }
      this.confirmLoading = true
      httpAction(this.runCmd, this.load, 'post').then((res) => {
        if (res.success) {
          if (type === 'unloadsbox') {
            this.pack.sCode = res.result.returnMesssage
            this.pack.sWeight = res.result.data.weight
            this.isResult = 'OK'
          } else {
            this.pack.bCode = res.result.returnMesssage
            this.pack.bWeight = res.result.data.weight
            this.isResult = 'OK'
          }
        } else {
          this.isResult = 'NOK'
        }
      }).finally(() => {
        this.$refs.code.focus()
        this.lineChange()
        this.confirmLoading = false
      })
    },
    /**
     * 查询日志
     */
    lineChange() {
      const that = this
      this.lineStatus = {
        serviceid: 'mes',
        cmd: 'stnstatus',
        entityid: this.model.line,
        clientid: this.model.line + ';' + this.model.op + ';' + this.model.stn,
        wo: 0,
        stn: 0,
        shift: '0',
        log: 20
      }
      httpAction(this.runCmd, this.lineStatus, 'post').then((res) => {
        if (res.success) {
          let wo = JSON.parse(res.result.data.wo)
          let log = JSON.parse(res.result.data.log)
          let stn = JSON.parse(res.result.data.stn)
          this.userName = Vue.ls.get(USER_INFO).realname
          this.stn = stn
          this.woOptions = wo
          this.woOptions.forEach(item => {
            if (item.id === this.stn.wo) {
              this.wo = item
            }
          })
          this.logs = log
        } else {
        }
      }).finally(() => {
        this.$refs.code.focus()
        //that.confirmLoading = false
      })
    },
    handleInput(val) {
      this.woOptions.forEach(item => {
        if (item.id === val) {
          this.wo = item
        }
      })
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
/**{*/
/*  margin: 0;*/
/*  padding: 0;*/
/*}*/
/deep/ .ant-form label {
  font-size: 20px !important;
}

.ant-form label {
  font-size: 20px;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: 30px;
  background: rgb(131, 194, 240);
}

.box {
  margin-left: 30px;
}

.btn {
  width: 100px;
  height: 80px;

  margin-left: 300px;
}

.kong {
  display: inline-block;
  width: 200px;
  height: 40px;
  background: rgb(196, 196, 196);
}

.si {
  width: 200px;
  height: 40px;
  background: rgb(196, 196, 196);
}

.box2 {
  display: flex;
  flex-direction: row;
  position: relative;
}

.b3 {

  margin-top: 20px;
  margin-left: 20px;
}

.b4 {
  margin-top: 20px;
  margin-left: 20px;
}

.b5 {
  margin-top: 20px;
  margin-left: 20px;
}

.xx {
  margin-top: 10px;
}

.zi {
  font-size: 30px;
}

#ww {
  margin-left: 30px;
}

table {
  user-select: text;
  margin-bottom: 0;
}

/deep/ .ant-table-tbody .log-1 {
  background: #f39c12;
  color: #fff;
}

/deep/ .ant-table-tbody .log-2 {
  background: #f56954;
  color: #fff;
}

/deep/ .ant-table-tbody .log-3 {
  background: #00a65a;
  color: #fff;
}


</style>
